<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<span>文本框脚本</span>
		<div>在html中，有两种方式来表现出文本框：一种是单行文本框input type='text' ，一种是多行文本框textarea。
		虽然input在字面上有value值，而textear却没有，但通过js都可以获取他们的value属性值。
		ps：在HTML中input有value属性而textarea没有，但是js中都有改属性。
		</div>
		
		<form id='myform' name="youfrom">
			姓名：<input type="text" name="user" value="text测试25548545" /><br />
			选择的文本为：<p id="pox"></p>
			文本域：<br />
			<textarea name="content">请输入</textarea>
			
		</form>
			
	</body>
	<script>
		window.addEventListener('load',function(){
			//获取value
			var fm = document.getElementById('myform');
			var user = fm.elements['user'];
			var content = fm.elements['content'];
			//标准dom获取
			//alert(user.getAttribute('value'));//兼容性不好，且无法获取更改后的value值
	/*		alert(user.value);
			alert(content.value);
			alert(user.defaultValue);//获取一开始的value值且不会改变
			
			user.select()//选定文本内容值
			//选择部分文本   setSelectionRange   非ie
			user.setSelectionRange(0,1);//选定第0到第1个位置的文本
			user.setSelectionRange(0,user.value.length);//选择全部
			user.focus();//焦点移入*/
			
	/*		//ie 8以下采用文本范围（w3c为dom范围）
			var range = user.createTextRange();//创建range对象，文本范围
			range.collapse(true);//将文本指针移到开头
			range.moveStart('character',0);//character表示逐字移动，从第0个开始
			range.moveEnd('character',2);//表示逐字选择几个
			range.select();//选中*/
			
			//getSelectText(user,1,3);//调用
			
			//当文本选中后执行
			//非ie选定文本且释放鼠标后触发select事件
			//ie只要选定了字符，就触发（可能选定多个，可能选定单个，不稳定）
			user.addEventListener('select',function(){
				/*alert('好嗨哟');
				alert(this.value);//弹出文本
				alert(this.selectionStart);//选中的开头位置
				alert(this.selectionEnd);//选中的结尾后的位置*/
				alert(this.value.substring(this.selectionStart,this.selectionEnd));//弹出选中的文本内容
				
				/*//document.selection对象可以选择；有一个方法可以创建文本范围对象createRange，该方法有一个属性text可以得到文本。
				alert(document.selection);//ie
				
				alert(document.selection.createRange().text);//ie
				*/
				
				//调用将值赋给pox
				document.getElementById('pox').innerHTML = getSelectTextContent(user);
				
			},false);
			
		});
		
		
				
			//鼠标选中文本内容的兼容方法
			
			function getSelectText(text,start,end){
				if(text.setSelectionRange){ //非ie
					text.setSelectionRange(start,end);
					text.focus();
				}else if(text.createTextRange){ //ie
					var range = text.createTextRange();
					range.collapse(true);
					range.moveStart('character',start);
					range.moveEnd('character',end-start);
					range.select();
				}
			}
		
		//获取鼠标选中文本的内容
		function getSelectTextContent(text){
			if(typeof text.selectionStart =='number'){//非ie
				return text.value.substring(text.selectionStart,text.selectionEnd);
			}else if(document.selection){//ie
				return document.selection.createRange().text;
			}
			
		}
		
	</script>
</html>
